import React, { useState, useEffect } from 'react';
import { Card, List, Typography } from 'antd';
import './HotSearch.less';
import { Image } from '@heroui/image';
import {
  fetchBaiduHotTopics,
  fetchDouyinHotTopics,
  fetchWeiboHotTopics,
  HotItem,
  HotTopic,
} from '@/services/hotTopic/api';

const { Text } = Typography;

const DouyinCard: React.FC<{ data: HotItem[] , wordCloud: string }> = ({ data,wordCloud }) => (
  <Card className="douyin-card" bordered={false}>
    <List
      dataSource={data}
      renderItem={(item) => (
        <List.Item className="douyin-item">
          <div className="douyin-rank">{item.index}</div>
          <a href={item.url} target="_blank" rel="noopener noreferrer">
            {item.word}
          </a>
        </List.Item>
      )}
    />
    <Image
      alt="HeroUI hero Image"
      src={wordCloud}
      width={300}
    />
  </Card>
);

const WeiboCard: React.FC<{ data: HotItem[], wordCloud: string }> = ({ data,wordCloud }) => (
  <Card className="weibo-card" bordered={false}>
    <List
      dataSource={data}
      renderItem={(item) => (
        <List.Item className="weibo-item">
          <Text strong className="weibo-rank">{item.index}.</Text>
          <div className="weibo-content">
            <a href={item.url} target="_blank" rel="noopener noreferrer">
              {item.word}
            </a>
          </div>
        </List.Item>

      )}
    />
    <Image
      alt="HeroUI hero Image"
      src={wordCloud}
      width={300}
    />
  </Card>
);
const BaiduCard: React.FC<{ data: HotItem[], wordCloud: string }> = ({ data,wordCloud }) => (
  <Card className="baidu-card" bordered={false}>
    <List
      dataSource={data}
      renderItem={(item) => (
        <List.Item className="baidu-item">
          <Text strong className="baidu-rank">{item.index}.</Text>
          <div className="baidu-content">
            <a href={item.url} target="_blank" rel="noopener noreferrer">
              {item.word}
            </a>
          </div>
        </List.Item>

      )}
    />
    <Image
      alt="HeroUI hero Image"
      src={wordCloud}
      width={300}
    />
  </Card>
);

const HotSearch: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(true);
  const [douyinData, setDouyinData] = useState<HotTopic>({
    hotTopic: [],
    wordCloud: ''
  });
  const [baiduData, setBaiduData] = useState<HotTopic>({
    hotTopic: [],
    wordCloud: ''
  });
  const [weiboData, setWeiboData] = useState<HotTopic>({
    hotTopic: [],
    wordCloud: ''
  });
  const [error, setError] = useState<string | null>(null);
  const [currentPage, setCurrentPage] = useState<{douyin: number; weibo: number; baidu: number;}>({
    douyin: 1,
    weibo: 1,
    baidu: 1
  });
  const pageSize = 10;

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);

        const douyinData = await fetchDouyinHotTopics();
        setDouyinData(douyinData);

        const weiboData = await fetchWeiboHotTopics();
        setWeiboData(weiboData);

        const baiduData = await fetchBaiduHotTopics();
        setBaiduData(baiduData);

      } catch (err) {
        setError('获取数据失败，请稍后重试');
        console.error('Fetch error:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (error) {
    return <div className="error-message">{error}</div>;
  }

  return (
    <div className="hot-search-container">
      <div className="cards-wrapper">
        <div className="card-container">
          <h3 className="card-title">抖音热搜</h3>
          <DouyinCard data={douyinData.hotTopic.slice((currentPage.douyin - 1) * pageSize, currentPage.douyin * pageSize)} wordCloud={douyinData.wordCloud}/>
          <div className="pagination">
            <button
              onClick={() => setCurrentPage({...currentPage, douyin: Math.max(1, currentPage.douyin - 1)})}
              disabled={currentPage.douyin === 1}
            >
              上一页
            </button>
            <span>第 {currentPage.douyin} 页</span>
            <button
              onClick={() => setCurrentPage({...currentPage, douyin: currentPage.douyin + 1})}
              disabled={currentPage.douyin * pageSize >= douyinData?.hotTopic.length}
            >
              下一页
            </button>
          </div>
        </div>
        <div className="card-container">
          <h3 className="card-title">微博热搜</h3>
          <WeiboCard data={weiboData.hotTopic.slice((currentPage.weibo - 1) * pageSize, currentPage.weibo * pageSize)} wordCloud={weiboData.wordCloud}/>
          <div className="pagination">
            <button
              onClick={() => setCurrentPage({...currentPage, weibo: Math.max(1, currentPage.weibo - 1)})}
              disabled={currentPage.weibo === 1}
            >
              上一页
            </button>
            <span>第 {currentPage.weibo} 页</span>
            <button
              onClick={() => setCurrentPage({...currentPage, weibo: currentPage.weibo + 1})}
              disabled={currentPage.weibo * pageSize >= weiboData.hotTopic.length}
            >
              下一页
            </button>
          </div>
        </div>
        <div className="card-container">
          <h3 className="card-title">百度热搜</h3>
          <BaiduCard data={baiduData.hotTopic.slice((currentPage.baidu - 1) * pageSize, currentPage.baidu * pageSize)} wordCloud={baiduData.wordCloud}/>
          <div className="pagination">
            <button
              onClick={() => setCurrentPage({...currentPage, weibo: Math.max(1, currentPage.baidu - 1)})}
              disabled={currentPage.baidu === 1}
            >
              上一页
            </button>
            <span>第 {currentPage.baidu} 页</span>
            <button
              onClick={() => setCurrentPage({...currentPage, weibo: currentPage.baidu + 1})}
              disabled={currentPage.baidu * pageSize >= baiduData.hotTopic.length}
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HotSearch;
